<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background: mediumslateblue;
        color: #dfdfdf;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title }}</h2>
      <h2>msg == {{msg }}</h2>
      <m-head></m-head>
      <parent></parent>
    </div>
    <template id="parent">
      <div>
        <h2>parent - parent - 父组件</h2>
        <h2>count -- {{count}}</h2>
        <h2>msg=== {{msg}}</h2>
        <p class="box" v-show="show">我是被子组件控制的</p>
        <hr />
        <child
          @changepcount="getNewCount"
          :msg="msg"
          @changemsg="getNewMsg"
          :show="show"
          :changeshow="changeshow"
        ></child>
        <!-- @事件名="函数" -->
      </div>
    </template>
    <template id="child">
      <div>
        <h2>child - child - 子组件1</h2>
        <button @click="changepcount">自定义事件修改父组件的 count</button>
        <p>
          <input type="text" :value="msg" @input="changeMsg" />
        </p>
        <p>
          <button @click="changeBy">$parent 去修改父实例</button>
          <button @click="changeshow(!show)">
            反向props 去修改父组件 图形的 {{show?'显示':'隐藏'}}
          </button>
        </p>
      </div>
    </template>
    <script>
      //全局注册
      Vue.component("mHead", {
        template: "<header> Head - Head - wh2116 daydayup </header>",
      });
      Vue.component("parent", {
        template: "#parent",
        data() {
          return {
            count: 2000,
            msg: "do you work hard?",
            show: true,
          };
        },
        methods: {
          getNewCount(n) {
            this.count += n;
          },
          getNewMsg(msg) {
            this.msg = msg;
          },
          changeshow(show) {
            this.show = show;
          },
        },
      });
      Vue.component("child", {
        template: "#child",
        props: ["msg", "show", "changeshow"],
        methods: {
          changepcount() {
            this.$emit("changepcount", 100);
          },
          changeMsg(e) {
            this.$emit("changemsg", e.target.value);
          },
          changeBy() {
            this.$parent.count++;
            this.$parent.getNewMsg("晚上好好学习");
          },
        },
      });
      const vm = new Vue({
        components: {},
        data: {
          title: "Vue 组件通信(子改父)",
          msg: "小型、独立和通常可复用的组件构建大型应用",
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");
    </script>
  </body>
</html>
